<template>
  <Modal
    title="材料库"
    v-model:active="materialSelectModalActive"
    width="960px"
    height="560px"
    class="material-modal"
    x-offset="0"
    :style="{ padding: '0 !important' }"
    @confirm="executeMatEmit"
  >
    <div class="content">
      <div class="left">
        <div class="material-title">材料名称</div>
        <NativeScroll class="material-names">
          <RadioGroup
            class="material-radiogroup"
            vertical
            :value="activeId"
            size="small"
            @change="handleRadio"
          >
            <Radio
              v-for="item in materials"
              :key="item.id"
              :label="item.id"
              class="material-radio"
            >
              <span class="material-name" :title="item.name">{{
                item.name
              }}</span>
            </Radio>
          </RadioGroup>
        </NativeScroll>
      </div>
      <div class="material-detail">
        <div class="title">
          <div class="title_color"></div>
          <div class="title_content">详情</div>
        </div>
        <NativeScroll class="params">
          <div v-for="key in materialParams()" :key="key" class="param">
            <span class="param-item">{{ parametersName?.[key] || key }}</span>
            <span class="param-value" :title="activeMaterial?.[key]">{{
              activeMaterial?.[key]
            }}</span>
          </div>
        </NativeScroll>
      </div>
    </div>
  </Modal>
</template>
<script setup lang="ts">
import { Modal, Grid, NativeScroll, RadioGroup, Radio } from "cax-ui";
import { getMaterials, Material } from "@/UI/api/material";
import { parametersName } from "@/UI/components/Material/constants";
import { onMounted, ref, watch, defineEmits } from "vue";
import { useCoreStore } from "@/UI/store";
import { storeToRefs } from "pinia";
const materials = ref<Material[]>([]);
const activeId = ref<number>(1);
const activeMaterial = ref<Material>({} as Material);
const coreStore = useCoreStore();
const { materialSelectModalActive } = storeToRefs(coreStore);
const info = {
  pageNum: 1,
  pageSize: 10000,
  totalElements: 45,
  totalPages: 5,
};

const emit = defineEmits(["emitMaterial"]);

function executeMatEmit() {
  coreStore.materialSelectModalActive = false;
  emit("emitMaterial", activeMaterial.value);
}

watch(materials, (val) => {
  if (!materials.value) return;
  activeId.value = materials.value[0].id;
  findMaterial(materials.value[0].id);
});

watch(activeId, (newVal) => {
  findMaterial(newVal);
});

function findMaterial(id: number) {
  if (!materials.value) return;
  const newMaterial = materials.value.find((item) => item.id === id);
  if (newMaterial) {
    activeMaterial.value = newMaterial;
  }
  return newMaterial;
}

function materialParams() {
  const params = { ...findMaterial(activeId.value) };
  delete params.id;
  return Object.keys(activeMaterial.value);
}

function handleRadio(val: number) {
  activeId.value = val;
}

onMounted(() => {
  getMaterials().then((res: any) => {
    materials.value = res.data;
    info.pageNum = res.data.pageNum;
    info.pageSize = res.data.pageSize;
    info.totalElements = res.data.totalElements;
    info.totalPages = res.data.totalPages;
  });
});
</script>
<style scoped lang="less">
.material-modal {
  .content {
    display: flex;
    height: 474px;
    margin-left: -14px;
    margin-top: -14px;

    .left {
      border-right: #eaecef 1px solid;
      flex: 1;

      .material-title {
        font-family: Microsoft YaHei;
        font-size: 14px;
        text-align: center;
        font-weight: 700;
        line-height: 22px;
        letter-spacing: 0em;
        color: #1c2126;
        padding: 12px 0;
        border-bottom: #eaecef 1px solid;
      }

      .material-names {
        height: 426px;

        .material-radiogroup {
          width: 100%;

          .material-radio {
            width: 100%;
            padding-left: 24px;

            .material-name {
              display: inline-block;
              font-size: 14px;
              color: #1c2126;
              height: 38px;
              line-height: 38px;
              width: 168px;
              overflow: hidden;
              text-overflow: ellipsis;
            }

            &:hover {
              background-color: #e8f8ff;
            }
          }
        }
      }
    }

    .material-detail {
      flex: 3;

      .title {
        display: flex;
        align-items: center;
        padding: 12px 24px 16px;

        .title_color {
          width: 4px;
          height: 12px;
          background: #339af0;
          margin-right: 8px;
        }

        .title_content {
          opacity: 1;
          font-family: PingFang SC;
          font-size: 14px;
          font-weight: 600;
          line-height: 22px;
          letter-spacing: 0em;
          font-variation-settings: "opsz" auto;
          color: #212529;
        }
      }

      .params {
        border-top: 1px solid #dcdee1;
        border-bottom: none;
        margin: 0 24px;
        height: 424px;

        .param {
          height: 40px;
          display: flex;
          border: 1px solid #dcdee1;
          border-top: none;
          align-items: center;
          .param-item {
            flex: 3;
            display: flex;
            align-items: center;
            padding-left: 16px;
            height: 100%;
            border-right: 1px solid #dcdee1;
            background-color: #f9fbfc;
            font-family: Microsoft YaHei;
            font-size: 14px;
            font-weight: normal;
            line-height: 22px;
            letter-spacing: 0em;
            color: #1c2126;
          }

          .param-value {
            flex: 5;
            display: flex;
            align-items: center;
            padding-left: 16px;
            height: 100%;
            font-family: Microsoft YaHei;
            font-size: 14px;
            font-weight: normal;
            line-height: 22px;
            letter-spacing: 0em;
            color: #1c2126;
            overflow: hidden;
            text-overflow: ellipsis;
          }
        }
      }
    }
  }
}
</style>
